<template>
  <div class="box">
    <div class="main float_left">
      <div class="main_wrap">this is main</div>
    </div>
    <div class="left float_left">this is left</div>
    <div class="right float_left">this is right</div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.box {
  min-width: 550px;
  .float_left {
    float: left;
  }

  .main {
    width: 100%;
    height: 300px;
    background-color: #c6c4c6;
    .main_wrap {
      margin: 0 200px 0 300px;
    }
  }
  .left {
    width: 300px;
    height: 300px;
    background-color: blue;
    margin-left: -100%;
  }
  .right {
    width: 200px;
    height: 300px;
    background-color: red;
    margin-left: -200px;
  }
}
</style>
